<template>
    <!-- 平台源表数据源 -->
   <div id="platformSourceTable" class="app-container">
		<header id="header">
			<p>自定义数据源</p>
			<a-input-group compact>
				<a-select style="width:100px" :default-value="leftValue" @change="changeBtn">
					<a-select-option  
						v-for="(item, index) in optionSelect"
						:key="index"
						:value="item.value"
						>
						{{ item.label }}
					</a-select-option>
				</a-select>
				<a-input style="width: 30%" v-model="rightValue"/>
				<a-button @click="searchBtn" type="primary"> 搜索 </a-button>
			</a-input-group>
		</header>

		<main id="main">
			<div id="button">
				<a-button type="primary" @click="$router.push({path:'/dataAnalysis/create'})">新建自定义数据源</a-button>
				<a-button type="primary" @click="$router.push({path:'/dataAnalysis/components/upload'})">上传Excel</a-button>
			</div>

			<!-- 表格 -->
			<a-table
				:columns="columns"
				:data-source="data"
				:pagination="false"
				bordered
				:rowKey="(record, index) => {return index;}"
				size="small">
					<template
						slot="serial"
						slot-scope="text, record, index">
						<a>{{ index + 1 }}</a>
					</template>
					<template
						slot="type"
						slot-scope="text, record, index">
						<a>{{ record.type === 1 ? '自定义数据集' : 'Excel数据集' }}</a>
					</template>
						<template
							slot="action"
							slot-scope="text, record">
						<a-button
							@click="handlePreview(record)"
							type="link"
							v-if="record.type !== 1">预览</a-button>
						<a-button type="link" @click="editorBtn(record)">编辑</a-button>
						<a-button
							type="link"
							@click="deletBtn(record)">删除</a-button>
					</template>
			</a-table>
		</main>

		<footer id="footer">
			<a-config-provider :locale="zh_CN">
				<a-pagination
					show-size-changer
					v-model="current"
					:page-size="pageSize"
					:total="total"
					show-quick-jumper
					@change="onChange"
					@showSizeChange="onShowSizeChange"
					:show-total="total => `总数据 ${total} 条`"/>
			</a-config-provider>
		</footer>
		
		<!-- 预览 -->
		<a-modal
			title="预览"
			:visible="visible"
			:destroyOnClose="true"
			width="90%"
			id="handleCancel">
			<preview :tableId="tableId" :accessType="accessType"></preview>
			<div slot="footer">
				<a-button type="primary" @click="handleCancel">关闭</a-button>
			</div>
		</a-modal>
	</div>
</template>

<script>
import zh_CN from "ant-design-vue/lib/locale-provider/zh_CN";
import preview from "./components/preview"
import {
	dataSourceList,
	dataSourceDelete,
} from "@/api/dataAnalysis/dataSource";
export default {
	components:{
		preview
	},
	data() {
		return {
			leftValue: 1,
			rightValue: "",
			current:1,//当前页数
			pageSize:10,//当前页多少条数据
			total:0,
			zh_CN,
			tableId:'',
			accessType:'',
			visible: false,
			optionSelect: [
				{label: "名称",value: 1,},
				{label: "创建人",value: 2,},
				{label: "类型",value: 3,},
			], //下拉框选择
			// 表头
			columns: [
				{
					title: "序号",
					dataIndex: "serial",
					key: "serial",
					align: "center",
					scopedSlots: { customRender: "serial" },
				},
				{
					title: "名称",
					dataIndex: "name",
					key: "name",
					align: "center"
				},
				{
					title: "英文名称",
					dataIndex: "englishName",
					key: "englishName",
					align: "center",
					ellipsis: true,
				},
				{
					title: "类型",
					dataIndex: "type",
					key: "type",
					width: "20%",
					align: "center",
					scopedSlots: { customRender: "type" },
					ellipsis: true,
				},
				{
					title: "创建人/创建时间",
					dataIndex: "createByName",
					align: "center",
					customRender:(text, row, index)=> {
						console.log(row)
						return(
							<div>
								<div>{row.createByName}</div>
								<div>{row.createTime}</div>
							</div>
						)
					},
				},
				{
					title: "修改人/修改时间",
					dataIndex: "updateByName",
					align: "center",
					customRender:(text, row, index)=> {
						console.log(row)
						return(
							<div>
								<div>{row.updateByName}</div>
								<div>{row.updateTime}</div>
							</div>
						)
					},
				},
				{
					title: "操作",
					dataIndex: "action",
					key: "action",
					align: "center",
					scopedSlots: { customRender: "action" },
				},
			],
			// 内容
			data: [],
		};
	},

	mounted (){
		this.dataSourceBtn()
	},
	methods: {
		changeBtn(item) {
			console.log('123')
			console.log(item);
			this.leftValue = item
		},

		//获取列表数据
		dataSourceBtn(){
			let list = {
				content:this.rightValue,
				type:this.leftValue,
				pageNum:this.current,
				pageSize:this.pageSize
			}
			dataSourceList(list).then(res=>{
				if(res.code === 200){
					this.total = res.data.total
					this.data = res.data.records 
				}
			})
		},

		//搜索
		searchBtn() {
			console.log(this.leftValue);
			console.log(this.rightValue);
			this.current = 1;
			this.dataSourceBtn()
		},

		//预览
		handlePreview(record) {
			console.log(record)
			this.tableId = record.id;
			this.accessType= record.accessType;
			console.log(record)
			this.visible = true;
		},

		//跳转到某一页
		onChange(item) {
			console.log(item);
			this.current = item;
			this.dataSourceBtn()
		},

		//改变条数
		onShowSizeChange(current, pageSize) {
			console.log(current, pageSize);
			this.pageSize = pageSize;
			this.dataSourceBtn()
		},
		
		//删除
		deletBtn(item){
			dataSourceDelete(item.id).then(res=>{
				if(res.code === 200){
					this.dataSourceBtn()
					this.$message.success('删除成功');
				}else{
					this.$message.error(res.msg);
				}
			})
		},
		//弹窗取消按钮
		handleCancel() {
			this.visible = false;
		},
		//编辑
		editorBtn(item){
			this.$router.push({path:'/dataAnalysis/create',query:{
				id:item.id
			}})
		}
	},
};
</script>

<style lang="scss" scoped>
#platformSourceTable {
  background: white;
	#header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0.8rem 1rem;
		box-sizing: border-box;
		p {
			font-size: 1.5rem;
			font-weight: 600;
			margin-bottom: 0;
		}
		.ant-input-group {
			width: 30%;
			display: flex;
			justify-content: flex-end;
		}
	}
	#main{
		#button{
			padding: 0rem 1rem 1rem 1rem;
			box-sizing: border-box;
			.ant-btn{
				margin-right: 0.5rem;
			}
		}
	}
	#footer {
		box-sizing: border-box;
		padding: 0.5rem 1rem;
		display: flex;
		justify-content: flex-end;
	}
}
</style>

<style lang="scss">
#handleCancel {
.ant-modal-wrap {
	z-index: 3333;
}
#handleCancelBody {
	display: flex;
	justify-content: space-between;
	#left {
		width: 20%;
		border: 1px solid #eaeaea;
		padding: 0 1rem;
		.title {
			border-bottom: 1px solid #eaeaea;
			padding: 0.5rem 0;
			span {
				display: block;
				padding: 0.1rem 0.5rem;
				border-left: 3px solid rgb(17, 131, 248);
			}
		}
		.entry {
			display: flex;
			span {
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
			span:first-child {
				display: inline-block;
				width: 40%;
			}
			span:nth-child(2) {
				display: inline-block;
				width: 60%;
			}
		}
	}
	#right {
		border: 1px solid #eaeaea;
		width: 79%;
		box-sizing: border-box;
		padding: 0.5rem;
			.visibleFooter{
				box-sizing: border-box;
				padding: 0.5rem 1rem;
				margin-top:0.5rem;
				display: flex;
				justify-content: flex-end;
			}
		}
   }
}
</style>
